
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>双日历</title>
    <meta name="Keywords" content="" />
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/daterangepicker201803042238/iconfont/iconfont.css">
    <link href="http://www.jq22.com/demo/daterangepicker201803042238/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/daterangepicker201803042238/daterangepicker.css" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="http://www.jq22.com/demo/daterangepicker201803042238/moment.js"></script>
    <script src="http://www.jq22.com/demo/daterangepicker201803042238/daterangepicker.js"></script>
</head>
<body>
        <button type="button" class="btn btn-default" id="daterange-btn">
            <span>
            <i class="icon iconfont icon-calendar1"></i>日期选择
            </span>
            <i class="icon iconfont icon-danxian-youjiantou-copy"></i>
        </button>
<script type="text/javascript">
    $('.ranges_1 ul').remove();
    $('#daterange-btn').daterangepicker({
            ranges: {
                '全部': [moment(), moment().subtract(-1, 'days')],
                '今天': [moment(), moment()],
                '明天': [moment().subtract(-1, 'days'), moment().subtract(-1, 'days')],
                '未来七天': [moment(),moment().subtract(-6, 'days')],
                '未来30天': [moment(),moment().subtract(-29, 'days')],
                '未来60天': [moment(),moment().subtract(-59, 'days'), ]
            },
            startDate: moment(),
            endDate: moment()
        },
        function(start, end,label) {
            //label:通过它来知道用户选择的是什么，传给后台进行相应的展示
            console.log(label)
            if(label=='全部'){
                $('#daterange-btn span').html('全部');
            }else if(label=='今天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
            }else if(label=='明天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
            }else if(label=='未来七天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
            }else if(label=='未来30天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
            }else if(label=='未来60天'){
                $('#daterange-btn span').html(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
            }

        }
    );
</script>
</body>
</html>